<template>
  <div class="sess">
    <!-- 轮播图 -->
    <lunbo :bannerArr="galleryArr"></lunbo>
    <!-- 产品参数 -->
    <section>产品参数</section>
    <ul>
      <li v-for="item in attributeArr" :key="item.id">
        <p>
          {{ item.name }}&nbsp;&nbsp;&nbsp;<span>{{ item.value }}</span>
        </p>
      </li>
    </ul>
    <!-- 产品详情 -->
    <h5>产品详情</h5>
    <div class="goods_desc" v-html="goodsArr.goods_desc"></div>
    <!-- 下方购物栏 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon icon="cart-o" text="购物车" :badge="badge"
      @click="$router.push('/car')"/>
      <van-goods-action-icon
        :icon="isCollected ? 'star' : 'star-o'"
        :text="isCollected ? '已收藏' : '未收藏'"
        :color="isCollected ? 'darkred' : '#red'"
        @click="isCollected = !isCollected"
      />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="caryFn"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
    <!-- 商品规格 -->
    <van-sku
      v-model="show"
      :sku="sku"
      :goods="goods"
      :goods-id="goodsId"
      :hide-stock="sku.hide_stock"
      @buy-clicked="onBuyClicked"
      @add-cart="onAddCartClicked"
      ref="mysef"
    />
  </div>
</template>

<script>
import { XiangqingFn, CarFn, GetCartFn } from "@/utils/http";
//引入轮播图
import Lunbo from "@/components/Lunbo.vue";
export default {
  name: "Xiangqing",
  data() {
    return {
      galleryArr: [], //轮播图数据
      attributeArr: [], //产品参数
      goodsArr: {}, //产品详情
      isCollected: false, //是否收藏
      show: false, // 商品规格是否显示
      sku: {
        //商品数据
        // 数据结构见下方文档
        tree: [], // 商品规格类目数组目前没有类目默认空
        hide_stock: false, //是否显示商品剩余库存
        price: "", //价格
        stock_num: "", //当前 sku 组合对应的库存
      },
      goods: {
        // 默认商品 sku 缩略图
        picture: "",
      },
      goodsId: "", //当前商品的ID
      productId: "",
      badge: 0, //购物车徽标数量
    };
  },
  components: {
    Lunbo,
  },
  methods: {
    //点击购物车
    caryFn() {
      this.show = true;
    },
    // 点击购买回调
    onBuyClicked() {
      console.log("立即购买");
    },
    // 点击添加购物车回调
    onAddCartClicked() {
      console.log("加入购物车");
      //console.log(this.$refs.mysef.getSkuData());
      //加入购物车
      CarFn({
        goodsId: this.goodsId,
        productId: this.productId,
        number: this.$refs.mysef.getSkuData().selectedNum,
      }).then((res) => {
        console.log(res);
        if (res.data.errno == 0) {
          this.badge = res.data.data.cartTotal.goodsCount;
          //添加成功
          this.show = false;
          this.$toast({
            type: "success",
            message: "加入成功",
            duration: "5000",
          });
        } else {
          this.$toast({
            type: "fail",
            duration: "1000",
            message: "加入失败",
          });
        }
      });
    },
  },
  created() {
    //console.log(this.$route.query.id);
    XiangqingFn({ id: this.$route.query.id }).then((res) => {
      console.log(res);
      this.galleryArr = res.data.data.gallery;
      this.galleryArr = this.galleryArr.map((item) => {
        item.image_url = item.img_url;
        return item;
      });
      this.goodsArr = res.data.data.info;
      this.attributeArr = res.data.data.attribute;
      this.goods.picture = res.data.data.info.list_pic_url; //产品缩略图
      this.sku.price = res.data.data.info.retail_price; //产品价格
      this.sku.stock_num = res.data.data.info.goods_number; //产品数量
      this.goodsId = res.data.data.info.id; //产品Id
      this.productId = res.data.data.productList[0].id;
    });
    //获取购物车数量接口
    GetCartFn().then((res) => {
      console.log(res);
      //购物车的数量
      this.badge = res.data.data.cartTotal.goodsCount;
    });
  },
};
</script>

<style lang='less' scope>
.sess {
  h5 {
    text-align: center;
    font-size: 16px;
    line-height: 50px;
  }
  .goods_desc {
    img {
      width: 100%;
      display: block;
    }
  }
  section {
    font-size: 16px;
    line-height: 28px;
  }
  ul {
    display: flex;
    flex-wrap: wrap;
  }
  li {
    background: #efefef;
    font-size: 16px;
    line-height: 23px;
    text-align: center;
    width: 100%;
    height: 24px;
    margin-top: 5px;
    justify-content: space-between;
  }
}
</style>